<template>
	<view class="tuilist ptong">
		<scroll-view scroll-x class="tuiview" :scroll-left="scrollLeft" :scroll-with-animation="true">
			<view class="tuiitem" :class="currentindex == index ? 'tactive' : ''" v-for="(item, index) in 20" :key="index"
				@click="changeCate(index)">
				<text class="tuiname">推荐</text>
				<image class="xuans" src="/static/xuans.png" />
			</view>
		</scroll-view>
</view>
</template>

<script>
export default {
	props: {
		currentindex: {
			type: Number/String,
			default: 0
		},
		scrollLeft: {
			type: Number/String,
			default: 0
		},
		

	},
	name: "PayPop",
	data() {
		return {
			ispayPop: true,
			animat: this.isanimate(),
		};
	},
	methods: {
		changeCate(index) {
			this.$emit("changeCate",index);
		},
		reload() {
			this.$emit("reload");
		},
		manghe() {
			//我的盲盒
			uni.redirectTo({
				url: '/pages/my/index'
			})
		}
	}
}
</script>

<style scoped lang="scss">
.tuilist {
	display: flex;
	margin: 0rpx 0 0rpx;
	background-color: #fff;
	padding: 40rpx 0 20rpx;

	.tuiview {
		width: 100%;
		white-space: nowrap;

		.tuiitem {
			display: inline-block;
			// margin-right: 50rpx;
			position: relative;
			padding-bottom: 14rpx;
			width: 100rpx;
			text-align: center;

			.tuiname {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			.xuans {
				width: 50%;
				position: absolute;
				left: 25%;
				bottom: 0;
				height: 14rpx;
				display: none;
			}
		}

		.tactive {
			.tuiname {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: $Themecolor;
			}

			.xuans {
				display: inline-block;
			}
		}

	}
}
</style>
